<!-- TODO LIST ITEMS -->
<div class="todo-items" ng-sortable="vm.sortableOptions" ng-model="vm.tasks" ng-class="{'sortable': vm.taskOrder === ''}">
    <div class="todo-item" md-ink-ripple layout="row" layout-align="start center"
         ng-click="vm.openTaskDialog($event, task)"
         ng-repeat="task in vm.tasks | orderBy:vm.taskOrder:vm.taskOrderDescending | filter:global.search | filter:vm.taskFilters.search | filterByTags:vm.taskFilters.tags | filter:{'completed': vm.taskFilters.completed} | filter:{'deleted': vm.taskFilters.deleted} | filter:{'important': vm.taskFilters.important} | filter:{'starred':vm.taskFilters.starred} | filter:vm.filterByStartDate | filter:vm.filterByDueDate track by $index"
         ng-class="{'starred': task.starred, 'selected': task.selected, 'completed': task.completed}">

        <div class="handle" ng-click="vm.preventDefault($event)">
            <md-icon md-font-icon="icon-drag-vertical" class="icon"></md-icon>
        </div>

        <md-checkbox class="no-label" ng-checked="task.completed"
                     ng-click="vm.toggleCompleted(task, $event)"
                     aria-label="{{task.completed ? 'Not completed' : 'Completed'}}">
        </md-checkbox>

        <div layout="row" layout-align="start center" flex>

            <div class="info" flex>
                <div class="title">
                    {{task.title}}
                </div>

                <div class="notes">
                    {{task.notes}}
                </div>

                <div class="tags" layout="row" layout-align="start center" layout-wrap>
                    <div class="tag" layout="row" layout-align="start center" data-ng-repeat="tag in task.tags">
                        <div class="tag-color" ng-style="{'background-color': tag.color}"></div>
                        <div class="tag-label">{{tag.label}}</div>
                    </div>
                </div>
            </div>

            <div class="buttons" layout="row" layout-align="start center">
                <md-icon md-font-icon="icon-alert-circle" class="is-important red-600-fg"
                         ng-if="task.important"></md-icon>

                <md-icon md-font-icon="icon-star" class="is-starred amber-600-fg"
                         ng-if="task.starred"></md-icon>

                <md-menu>
                    <md-button class="md-icon-button" aria-label="More" translate
                               translate-attr-aria-label="TODO.MORE">
                        <md-icon md-font-icon="icon-dots-vertical" ng-click="$mdOpenMenu($event)"></md-icon>
                    </md-button>

                    <md-menu-content width="3">
                        <md-menu-item>
                            <md-button ng-click="task.completed = !task.completed" aria-label="Toggle done"
                                       translate-attr-aria-label="TODO.TOGGLE_DONE">
                                <md-icon ng-class="task.completed === false ? 'grey-fg' : 'blue-fg'"
                                         md-font-icon="icon-checkbox-marked-circle" class="s18"></md-icon>
                                <span ng-show="!task.completed" translate="TODO.MARK_AS_DONE">Mark as done</span>
                                <span ng-show="task.completed" translate="TODO.MARK_AS_UNDONE">Mark as undone</span>
                            </md-button>
                        </md-menu-item>

                        <md-menu-item>
                            <md-button ng-click="task.important = !task.important" aria-label="Toggle important"
                                       translate-attr-aria-label="TODO.TOGGLE_IMPORTANT">
                                <md-icon ng-class="task.important === false ? 'grey-fg' : 'red-600-fg'"
                                         md-font-icon="icon-alert-circle" class="s18"></md-icon>
                                    <span ng-show="!task.important" translate="TODO.MARK_AS_IMPORTANT"> Mark as
                                        important</span>
                                    <span ng-show="task.important" translate="TODO.REMOVE_IMPORTANT">Remove
                                        important</span>
                            </md-button>
                        </md-menu-item>

                        <md-menu-item>
                            <md-button ng-click="task.starred = !task.starred" aria-label="Toggle star"
                                       translate-attr-aria-label="TODO.TOGGLE_STAR">
                                <md-icon ng-class="task.starred === false ? 'grey-fg' : 'amber-600-fg'"
                                         md-font-icon="icon-star"
                                         class="s18"></md-icon>
                                <span ng-show="!task.starred" translate="TODO.ADD_STAR">Add star</span>
                                <span ng-show="task.starred" translate="TODO.REMOVE_STAR">Remove star</span>
                            </md-button>
                        </md-menu-item>
                    </md-menu-content>
                </md-menu>
            </div>
        </div>
    </div>
</div>
<!-- / TODO LIST ITEMS -->